<template>
  <view v-if="showselected" class="tabbar">
    <view class="navigator">
      <view
        v-for="(item, index) in tabBar.list"
        :key="item.pagePath"
        class="navigator-item"
        @click="switchTab(item)"
      >
        <!-- <img
            v-if="selectedIndex !== index"
            :src="item.iconPath"
            class="icon"
          />
          <img v-else :src="item.selectedIconPath" class="icon" /> -->
        <text
          :class="['item-text', { 'text-active': selectedIndex === index }]"
          >{{ item.text }}</text
        >
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { onShow } from "@dcloudio/uni-app";
const showselected = ref(true);
const selectedIndex = ref(0);

interface itemFace {
  pagePath: string;
  iconPath: string;
  selectedIconPath: string;
  text: string;
}
const tabBar = reactive({
  list: [
    {
      pagePath: "/pages/resumeTemplate/index",
      iconPath: "/static/tabIcon/icon1.png",
      selectedIconPath: "/static/tabIcon/icon2.png",
      text: "模板",
    },
    {
      pagePath: "/pages/index/index",
      iconPath: "/static/tabIcon/icon1.png",
      selectedIconPath: "/static/tabIcon/icon2.png",
      text: "简历",
    },
    {
      pagePath: "/pages/personar/index",
      iconPath: "/static/tabIcon/icon3.png",
      selectedIconPath: "/static/tabIcon/icon4.png",
      text: "个人中心",
    },
  ],
});
onShow(() => {
  const path = getCurrentPages()[0].$page.fullPath;
  tabBar.list.forEach((v, index) => {
    if (path === v.pagePath) {
      selectedIndex.value = index;
    }
  });
});
function switchTab(item: itemFace) {
  let url = item.pagePath;
  uni.switchTab({ url });
}
</script>

<style>
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  /* #ifdef H5 */
  height: 100rpx;
  /* #endif */
  /* #ifdef MP-WEIXIN */
  height: 120rpx;
  /* #endif */
  z-index: 999;
  background: #f5f5f5;
  border-top: 2rpx solid #eee;
}
.navigator {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
  height: 80%;
}

.navigator-item {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  height: 100%;
}

.item-text {
  margin-top: 6rpx;
  color: #777e86;
  font-size: 30rpx;
}

.text-active {
  color: #2e92fd !important;
}

.icon {
  width: 40rpx;
  height: 40rpx;
}
</style>
